import { useState } from 'react'
import { Card, Table, Button, Space, Tag, Modal, message, Progress } from 'antd'
import { DownloadOutlined, DeleteOutlined, ReloadOutlined, CloudUploadOutlined } from '@ant-design/icons'
import './index.scss'

const DataBackup = () => {
  const [loading, setLoading] = useState(false)
  const [backupProgress, setBackupProgress] = useState(0)
  const [isBackingUp, setIsBackingUp] = useState(false)

  // 模拟备份记录
  const [dataSource] = useState([
    {
      id: 1,
      fileName: 'backup_20240120_103000.sql',
      fileSize: '15.6 MB',
      backupTime: '2024-01-20 10:30:00',
      type: '手动备份',
      status: '成功',
    },
    {
      id: 2,
      fileName: 'backup_20240119_020000.sql',
      fileSize: '15.2 MB',
      backupTime: '2024-01-19 02:00:00',
      type: '自动备份',
      status: '成功',
    },
    {
      id: 3,
      fileName: 'backup_20240118_020000.sql',
      fileSize: '14.8 MB',
      backupTime: '2024-01-18 02:00:00',
      type: '自动备份',
      status: '成功',
    },
    {
      id: 4,
      fileName: 'backup_20240117_020000.sql',
      fileSize: '14.5 MB',
      backupTime: '2024-01-17 02:00:00',
      type: '自动备份',
      status: '成功',
    },
  ])

  // 创建备份
  const handleCreateBackup = () => {
    setIsBackingUp(true)
    setBackupProgress(0)
    
    const interval = setInterval(() => {
      setBackupProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval)
          setIsBackingUp(false)
          message.success('数据备份成功')
          return 100
        }
        return prev + 10
      })
    }, 200)
  }

  // 下载备份
  const handleDownload = (record) => {
    message.success(`开始下载 ${record.fileName}`)
  }

  // 删除备份
  const handleDelete = (record) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定删除备份文件"${record.fileName}"吗？`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        message.success('删除成功')
      },
    })
  }

  // 恢复备份
  const handleRestore = (record) => {
    Modal.confirm({
      title: '确认恢复',
      content: (
        <div>
          <p>确定要恢复到备份"{record.fileName}"吗？</p>
          <p style={{ color: '#ff4d4f' }}>警告：此操作将覆盖当前数据，请谨慎操作！</p>
        </div>
      ),
      okText: '确定恢复',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        message.success('数据恢复成功')
      },
    })
  }

  const columns = [
    {
      title: '文件名',
      dataIndex: 'fileName',
      key: 'fileName',
      width: 250,
    },
    {
      title: '文件大小',
      dataIndex: 'fileSize',
      key: 'fileSize',
      width: 120,
    },
    {
      title: '备份时间',
      dataIndex: 'backupTime',
      key: 'backupTime',
      width: 180,
    },
    {
      title: '备份类型',
      dataIndex: 'type',
      key: 'type',
      width: 120,
      render: (type) => (
        <Tag color={type === '手动备份' ? 'blue' : 'green'}>
          {type}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => (
        <Tag color={status === '成功' ? 'success' : 'error'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            icon={<DownloadOutlined />}
            onClick={() => handleDownload(record)}
          >
            下载
          </Button>
          <Button
            type="link"
            size="small"
            icon={<ReloadOutlined />}
            onClick={() => handleRestore(record)}
          >
            恢复
          </Button>
          <Button
            type="link"
            size="small"
            icon={<DeleteOutlined />}
            danger
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]

  return (
    <div className="data-backup-container">
      <Card className="backup-card">
        <div className="backup-header">
          <div className="header-info">
            <h3>数据备份管理</h3>
            <p>定期备份数据可以有效防止数据丢失</p>
          </div>
          <Button
            type="primary"
            icon={<CloudUploadOutlined />}
            onClick={handleCreateBackup}
            disabled={isBackingUp}
          >
            立即备份
          </Button>
        </div>

        {isBackingUp && (
          <div className="backup-progress">
            <Progress percent={backupProgress} status="active" />
            <p>正在备份数据，请稍候...</p>
          </div>
        )}

        <Table
          columns={columns}
          dataSource={dataSource}
          rowKey="id"
          loading={loading}
          pagination={{
            total: dataSource.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </Card>
    </div>
  )
}

export default DataBackup
